<template>
    <view>
        <view class="cityBar">
            <view class="rows" :style="{ height: System.statusBarHeight + 'px' }"></view>
            <view class="d-flex a-center" :style="{ width: navWidth + 'px', height: navHeight + 'px' }">
                <view class="iconfont icon-xiangzuo size36 black padding20" @click="$back()"></view>
                <text class="size32 black bold">选择城市</text>
            </view>
            <view class="viewbox auto d-flex a-center m-top20 m-bot20 search">
                <view class="iconfont icon-btn_search color_99 size36"></view>
                <input type="text" class="flex-1 height p-left10 size26 color_33" v-model="searchCity" placeholder="输入城市" />
            </view>
        </view>

        <view class="rows" :style="{ height: fiexHeight + 'px' }"></view>
        <scroll-view scroll-y="true" class="scrollY" :scroll-top="scrolltop" @scroll="scroll" :scroll-into-view="scrollintoview" v-show="!searchCity">
            <view class="hotCity">
                <text class="size28 color_99">热门城市</text>
                <view class="row j-sb">
                    <block v-for="(item, index) in cityList.hit" :key="index">
                        <view class="hot flexac" @click="citySelect(item)">{{ item.name }}</view>
                    </block>
                </view>
            </view>

            <view class="allCity">
                <view class="row m-top20" :id="`city_${item.name}`" v-for="(item, index) in cityList.result" :key="index">
                    <text class="color_99 size28">{{ item.name }}</text>
                    <view class="cityLi" @click="citySelect(subItem)" v-for="(subItem, subIndex) in item.data" :key="subIndex">{{ subItem.name }}</view>
                </view>
            </view>
        </scroll-view>

        <view class="cityPostion" v-show="!searchCity">
            <view class="citpost flexac" @click="Togcity(item)" :class="{ active: item.name === scrollname }" v-for="(item, index) in cityList.result" :key="index">
                <text class="txt">{{ item.name }}</text>
            </view>
        </view>

        <!-- 搜索 -->
        <scroll-view scroll-y="true" class="sarchView" :style="{ top: fiexHeight + 'px' }" v-if="searchCity">
            <view class="rows" v-if="searchList && searchList.length">
                <view class="cityLi" @click="citySelect(subItem)" v-for="(subItem, subIndex) in searchList" :key="subIndex">{{ subItem.name }}</view>
            </view>
            <emptys empty="search" v-else title="无相关信息"></emptys>
        </scroll-view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    export default {
        data() {
            return {
                searchCity: '',
                scrolltop: 0,
                cityList: '',
                scrollname: '',
                scrollintoview: '',
                allData: []
            };
        },
        onLoad() {
            uni.request({
                url: 'https://imgcdn.mogoie.com/json/city.json',
                success: (res) => {
                    this.cityList = res.data;
                }
            });
        },
        onShow() {
            let that = this;
            setTimeout(() => {
                that.cityList.result.forEach((item, index) => {
                    that.allData = [...that.allData, ...item.data];
                    that.getViewInfo(`#city_${item.name}`).then((res) => {
                        const result = res.top;
                        item.tops = result;
                    });
                });
            }, 1000);
        },
        methods: {
            ...mapMutations(['SeletCity']),
            Togcity(item) {
                this.scrollintoview = `city_${item.name}`;
                this.scrollname = item.name;
            },
            getViewInfo(selector) {
                const query = uni.createSelectorQuery().in(this);
                return new Promise((resolve) => {
                    query
                        .select(selector)
                        .boundingClientRect((data) => {
                            resolve(data);
                        })
                        .exec();
                });
            },
            scroll(e) {
                let that = this;
                const scrollTop = e.detail.scrollTop;
                const result = that.cityList.result;
                const fiexHeight = that.fiexHeight;
                for (let i = 0; i < result.length; i++) {
                    if (scrollTop >= result[i].tops - fiexHeight && i == result.length - 1) {
                        that.scrollname = result[i].name;
                        break;
                    }
                    if (scrollTop >= result[i].tops - fiexHeight && scrollTop < result[i + 1].tops - fiexHeight && i != result.length - 1) {
                        that.scrollname = result[i].name;
                    }
                    if (scrollTop < result[0].tops - fiexHeight) that.scrollname = '';
                }
            },

            citySelect(item) {
                this.SeletCity(item);
                this.$back();
            }
        },
        computed: {
            ...mapState(['navHeight', 'navWidth', 'System']),
            fiexHeight() {
                return this.System.statusBarHeight + this.navHeight + 70;
            },

            searchList() {
                if (!this.allData.length || !this.searchCity) return;
                return this.allData.filter((n) => n.name.indexOf(this.searchCity) != -1);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .cityBar {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #ffffff;
        z-index: 100;
    }

    .search {
        height: 70rpx;
        background-color: #f3f4f5;
        border-radius: 10rpx;
        overflow: hidden;
        padding: 0 20rpx;
    }

    .scrollY {
        width: 100%;
        height: 100vh;
    }

    .hot {
        width: calc((100% - 60rpx) / 4);
        height: 66rpx;
        position: relative;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #333;
    }

    .hot::after {
        content: '';
        width: 200%;
        height: 200%;
        box-sizing: border-box;
        border: 1px solid #d6d6d6;
        border-radius: 10rpx;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        transform: scale(0.5);
        transform-origin: 0 0;
    }

    .hotCity {
        width: 680rpx;
        padding-left: 30rpx;
    }

    .allCity {
        width: 680rpx;
        padding: 30rpx 0 30rpx 30rpx;
    }

    .cityLi {
        width: 100%;
        padding: 24rpx 0;
        position: relative;
        color: #333;
        font-size: 26rpx;
    }

    .cityLi::after {
        content: '';
        width: 200%;
        height: 200%;
        position: absolute;
        left: 0;
        top: 0;
        border-bottom: 1px solid #d6d6d6;
        transform: scale(0.5);
        transform-origin: 0 0;
    }

    .cityPostion {
        position: fixed;
        top: 50%;
        right: 20rpx;
        z-index: 101;
        transform: translate(0, -50%);
    }

    .citpost {
        margin: 14rpx 0;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
    }

    .txt {
        font-size: 22rpx;
        color: #626262;
    }

    .active {
        background-color: #e9e9e9;
    }

    .sarchView {
        width: 100%;
        background-color: #ffffff;
        padding-left: 30rpx;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 200;
    }
</style>
